import Link from "next/link";
import { notFound } from "next/navigation";
import { ArrowLeft } from "lucide-react";
import { requireAdmin } from "@/lib/session";
import { CONCRETE_NETWORKS, PROVIDER_IDS, getDomainProfile } from "@/lib/queries/admin";
import { formatDate, formatMs, formatNumber, formatPercent, formatUsd } from "@/lib/format";
import { PageHeader } from "@/components/ui/page-header";
import { Badge, StatusBadge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Stat, StatGrid } from "@/components/ui/stat";
import { Table, TableBody, TableCell, TableEmpty, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { DateCell, KV, Mono, NetworkBadge, Panel, ProviderBadge, numCell } from "@/components/admin/primitives";
import { DomainPolicyEditor, ResetDomainStatsButton } from "@/components/admin/domain-policy-editor";

export const dynamic = "force-dynamic";

export default async function AdminDomainDetail({ params }: { params: Promise<{ domain: string }> }) {
  await requireAdmin();
  const { domain: raw } = await params;
  const domain = decodeURIComponent(raw).toLowerCase();
  const d = await getDomainProfile(domain);
  if (!d) notFound();
  const p = d.profile;
  const routes = Object.entries(p.routeStats ?? {}).sort((a, b) => b[1].n - a[1].n);
  const availableKeys = Array.from(new Set([...routes.map(([k]) => k), ...PROVIDER_IDS.flatMap((pr) => CONCRETE_NETWORKS.map((n) => `${pr}:${n}`))]));

  return (
    <>
      <div className="mb-4">
        <Button asChild variant="ghost" size="sm" className="-ml-2">
          <Link href="/admin/domains">
            <ArrowLeft className="size-3.5" /> Domains
          </Link>
        </Button>
      </div>
      <PageHeader
        eyebrow="Domain profile"
        title={<Mono className="text-[20px]">{p.domain}</Mono>}
        description={`Learned since ${formatDate(p.updatedAt)} · last seen ${formatDate(p.lastSeenAt)}`}
        actions={
          <>
            <Button asChild variant="outline" size="sm">
              <Link href={`/admin/requests?domain=${encodeURIComponent(p.domain)}`}>Explore requests</Link>
            </Button>
            <ResetDomainStatsButton domain={p.domain} />
          </>
        }
      />

      <StatGrid cols={6} className="mb-6">
        <Stat label="Requests" value={formatNumber(p.requests)} />
        <Stat label="Success" value={formatPercent(p.requests ? (p.successes / p.requests) * 100 : null)} />
        <Stat label="Blocked" value={formatPercent(p.requests ? (p.blocks / p.requests) * 100 : null)} hint={`${p.blocks} blocks`} />
        <Stat label="Captcha" value={formatPercent(p.requests ? (p.captchas / p.requests) * 100 : null)} hint={`${p.captchas} seen`} />
        <Stat label="Browser required" value={formatNumber(p.browserRequired)} hint="signals seen" />
        <Stat label="Avg latency" value={formatMs(p.avgLatencyMs)} />
      </StatGrid>

      <div className="grid gap-6 lg:grid-cols-2">
        <Panel title="Route statistics" description="Per provider:network key, as used by the routing score (35 % success, 15 % latency)." flush>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Route</TableHead>
                <TableHead className="text-right">n</TableHead>
                <TableHead className="text-right">ok</TableHead>
                <TableHead className="text-right">Success</TableHead>
                <TableHead className="text-right">Blocked</TableHead>
                <TableHead className="text-right">Avg lat.</TableHead>
                <TableHead className="text-right">Cost</TableHead>
                <TableHead className="text-right">Cost / success</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {routes.length === 0 ? (
                <TableEmpty colSpan={8}>No route statistics yet.</TableEmpty>
              ) : (
                routes.map(([key, s]) => {
                  const [prov, net] = key.split(":");
                  return (
                    <TableRow key={key}>
                      <TableCell>
                        <span className="inline-flex items-center gap-1.5">
                          <ProviderBadge id={prov} />
                          <NetworkBadge network={net} />
                        </span>
                      </TableCell>
                      <TableCell className={numCell}>{s.n}</TableCell>
                      <TableCell className={numCell}>{s.ok}</TableCell>
                      <TableCell className={numCell}>{formatPercent(s.n ? (s.ok / s.n) * 100 : null)}</TableCell>
                      <TableCell className={numCell}>{formatPercent(s.n ? (s.blocked / s.n) * 100 : null)}</TableCell>
                      <TableCell className={numCell}>{formatMs(s.lat)}</TableCell>
                      <TableCell className={numCell}>{formatUsd(s.cost, true)}</TableCell>
                      <TableCell className={`${numCell} font-semibold`}>{formatUsd(s.ok ? s.cost / s.ok : null, true)}</TableCell>
                    </TableRow>
                  );
                })
              )}
            </TableBody>
          </Table>
        </Panel>
        <div className="grid gap-6">
          <Panel title="Policy" description="Admin overrides applied before scoring. Saved immediately; takes effect on the next request.">
            <DomainPolicyEditor domain={p.domain} policy={p.policy ?? null} availableKeys={availableKeys} />
          </Panel>
          <Panel title="Learned preference">
            <KV
              cols={2}
              items={[
                { label: "Preferred provider", value: <ProviderBadge id={p.preferredProvider} /> },
                { label: "Preferred network", value: <NetworkBadge network={p.preferredNetwork} /> },
                { label: "Policy JSON", value: p.policy ? JSON.stringify(p.policy) : "none", mono: true, span: true },
              ]}
            />
          </Panel>
        </div>
      </div>

      <Panel title="Recent requests (7d)" flush className="mt-6">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Request</TableHead>
              <TableHead>Organization</TableHead>
              <TableHead>Status</TableHead>
              <TableHead>Network</TableHead>
              <TableHead className="text-right">Attempts</TableHead>
              <TableHead className="text-right">Latency</TableHead>
              <TableHead className="text-right">When</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {d.recent.length === 0 ? (
              <TableEmpty colSpan={7}>No requests in the last 7 days.</TableEmpty>
            ) : (
              d.recent.map((r) => (
                <TableRow key={r.id}>
                  <TableCell>
                    <Link href={`/admin/requests/${r.id}`} className="hover:underline">
                      <Mono>{r.id}</Mono>
                    </Link>
                  </TableCell>
                  <TableCell>{r.orgName ?? "—"}</TableCell>
                  <TableCell>
                    <StatusBadge status={r.status} />
                    {r.errorCode ? <Badge variant="outline" className="ml-1 font-mono">{r.errorCode}</Badge> : null}
                    {r.httpStatus ? <Mono className="ml-1 text-fg-muted">{r.httpStatus}</Mono> : null}
                  </TableCell>
                  <TableCell>
                    <NetworkBadge network={r.network} />
                  </TableCell>
                  <TableCell className={numCell}>{r.attempts}</TableCell>
                  <TableCell className={numCell}>{formatMs(r.latencyMs)}</TableCell>
                  <TableCell className="text-right">
                    <DateCell value={r.createdAt} />
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </Panel>
    </>
  );
}